import { Tabs } from "@ark-ui/solid/tabs";
import { For, createMemo, Show } from "solid-js";
import { FileText, Calendar, Bell } from "lucide-solid";

const tabs = [
  {
    value: "overview",
    label: "Documents",
    icon: FileText,
    content: "Access and organize all your files and folders.",
  },
  {
    value: "projects",
    label: "Events",
    icon: Calendar,
    badge: { type: "count", value: 4 },
    content: "View upcoming meetings and scheduled appointments.",
  },
  {
    value: "packages",
    label: "Alerts",
    icon: Bell,
    badge: { type: "label", value: "Live" },
    content: "Monitor real-time notifications and system updates.",
  },
];

export default function TabsWithIcons() {
  return (
    <div class="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex flex-col items-center">
      <Tabs.Root
        defaultValue="overview"
        class="w-full flex flex-col items-center"
      >
        <Tabs.List class="flex gap-8 relative border-b border-gray-200 dark:border-gray-700 mb-8 w-fit">
          <For each={tabs}>
            {(tab) => {
              const Icon = createMemo(() => tab.icon);
              return (
                <Tabs.Trigger
                  value={tab.value}
                  class="flex items-center gap-2 px-1 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors data-selected:text-gray-900 relative border-b-2 border-transparent data-selected:border-gray-900 dark:text-gray-400 dark:hover:text-gray-200 dark:data-selected:text-gray-100 dark:data-selected:border-gray-100"
                >
                  <Icon() size={16} />
                  {tab.label}
                  <Show when={tab.badge}>
                    <span
                      class={`flex items-center justify-center ${
                        tab.badge?.type === "count"
                          ? "w-5 h-5 text-xs font-medium text-gray-600 bg-gray-200 rounded-full dark:text-gray-300 dark:bg-gray-600"
                          : "px-2 py-0.5 text-xs font-medium text-white bg-gray-600 rounded-full dark:bg-gray-400 dark:text-gray-900"
                      }`}
                    >
                      {tab.badge?.value}
                    </span>
                  </Show>
                </Tabs.Trigger>
              );
            }}
          </For>
        </Tabs.List>

        <For each={tabs}>
          {(tab) => (
            <Tabs.Content
              value={tab.value}
              class="text-center text-gray-600 dark:text-gray-300"
            >
              {tab.content}
            </Tabs.Content>
          )}
        </For>
      </Tabs.Root>
    </div>
  );
}